<!DOCTYPE html>
<html>

<head>
  <title>RtspPlay</title>
  <meta charset="UTF-8">
  <style>
    #player {
      position: relative;
      width: 80%;
      height: 80%;
    }

    #videoElement {
      width: 80%;
      height: 80%;
    }

    #canvas {
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
      /* Prevent mouse events on the canvas */
    }
  </style>
</head>

<body>
  <div id="player">
    <video id="videoElement" controls autoplay></video>
    <canvas id="canvas"></canvas>
  </div>

  <script src="js/flv.js"></script>
  <script src="js/weui.min.js"></script>
  <script>
    const videoElement = document.getElementById("videoElement");
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    videoElement.muted = true;

    function setCanvasSize() {
      canvas.width = videoElement.clientWidth;
      canvas.height = videoElement.clientHeight;
    }

    function postData(ratioX, ratioY, ratioWidth, ratioHeight) {
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/setpos');
      xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
      const data = {
        x: parseFloat(ratioX).toFixed(2) * 1,
        y: parseFloat(ratioY).toFixed(2) * 1,
        w: parseFloat(ratioWidth).toFixed(2) * 1,
        h: parseFloat(ratioHeight).toFixed(2) * 1
      };
      xhr.send(JSON.stringify(data));
    }

    setCanvasSize(); // Set initial size
    window.addEventListener('resize', setCanvasSize); // Update size on window resize

    let isDrawing = false;
    let startX, startY;
    let rectangles = []; // Store drawn rectangles

    videoElement.addEventListener('mousemove', (e) => {
      if (isDrawing) {
        draw(e.offsetX, e.offsetY); // Pass the current mouse position
      }
    });
    videoElement.addEventListener('contextmenu', (e) => {
      e.preventDefault(); // 阻止右键菜单
    });
    videoElement.addEventListener('mousedown', (e) => {
      e.preventDefault(); // 阻止默认行为
      if (e.button === 2) { // Check if the left mouse button is pressed
        isDrawing = true;
        startX = e.offsetX;
        startY = e.offsetY;
        draw(startX, startY); // Start drawing
      }
    });

    videoElement.addEventListener('mouseup', async (e) => {
      if (isDrawing) {

        const width = e.offsetX - startX;
        const height = e.offsetY - startY;

        // Clear previous rectangles and store the new one
        rectangles = [{ startX, startY, width, height }];

        // Output the rectangle coordinates as proportions
        const ratioX = (startX / videoElement.clientWidth).toFixed(2);
        const ratioY = (startY / videoElement.clientHeight).toFixed(2);
        const ratioWidth = (width / videoElement.clientWidth).toFixed(2);
        const ratioHeight = (height / videoElement.clientHeight).toFixed(2);
        console.log(`Rectangle: StartX: ${ratioX}, StartY: ${ratioY}, Width: ${ratioWidth}, Height: ${ratioHeight}`);
        postData(ratioX, ratioY, ratioWidth, ratioHeight);

        // draw(); // Final draw to display the rectangle
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        isDrawing = false;
      }
    });

    function draw(currentX = startX, currentY = startY) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.strokeStyle = 'red';
      ctx.lineWidth = 2;

      rectangles.forEach(rect => {
        ctx.strokeRect(rect.startX, rect.startY, rect.width, rect.height);
      });

      if (isDrawing) {
        const width = currentX - startX;
        const height = currentY - startY;
        ctx.strokeRect(startX, startY, width, height);
      }
    }

    let player = flvjs.createPlayer({
      type: "flv",
      url: "/live/stream.flv",
      isLive: true,
      hasAudio: false,
      hasVideo: true,
      enableStashBuffer: false,
      stashInitialSize: 10,
      lazyLoad: false,
    });

    player.attachMediaElement(videoElement);
    player.load();
    player.play();
  </script>
</body>

</html>